import React from 'react'
import { Table, Button, Modal } from 'antd';
import { Input } from 'antd';
import { AudioOutlined } from '@ant-design/icons';
import { Popconfirm, message } from 'antd';

const { Search } = Input;

export default class StudentTable extends React.Component{
    constructor(props){
        super(props);
        this.state={
            dataSource:[],
            selected:[],
            modalShow:false,
            loading:false,
            modalContent:{id:"",name:""},
            modalXingWei: "update",
        };


        this.updateTable = this.updateTable.bind(this);
    }

    componentDidMount(){
        this.updateTable();

    }

    updateTable(){
        fetch("http://localhost:80/search/getStuList",{
            method: 'GET',
            headers: Headers,
            'mode': 'cors'
        })
            .then(res => {
                console.log(res);
                return res.json();
            })
            .then(data => {
                for(let i=0;i<data.length;i++){
                    data[i]["key"] = data[i].id;
                }
                this.setState({dataSource:data});
            });
    }

    componentWillUnmount(){

    }

    render(){
        const columns=[
            {
                title: '职工号',
                dataIndex: 'id',
                key: 'id',
            },
            {
                title: '姓名',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: '操作',
                dataIndex: 'action',
                key: 'action',
                render: (text, record, index)=>{

                    const { modalShow, loading } = this.state;

                    return (
                        <div>
                            <Button type="link"
                                    onClick= {()=>{this.props.changeTable(record.id);}}
                            >查看消费流水
                            </Button>
                            <Popconfirm
                                title="确定要删除此用户?"
                                onConfirm={
                                    ()=>{
                                        fetch(`http://localhost:80/search/deleteStu?id=${record.id}&name=${this.state.modalContent.name}`,{
                                            method: 'get',
                                            headers:  Headers,
                                            'mode': 'cors'
                                        })
                                            .then(res => {
                                                console.log(res);
                                                if(res.status === 200){
                                                    this.setState({loading:false});

                                                }else{
                                                    this.setState({loading:false});
                                                    message.success('删除失败');
                                                }
                                                return res.json();
                                            })
                                            .then(data => {
                                                if (data === false){
                                                    message.success('删除失败');
                                                }else{
                                                    message.success('删除成功');
                                                    this.setState({
                                                        modalShow: false,
                                                    })
                                                }
                                                this.updateTable();
                                            });
                                    }
                                }
                                okText="Yes"
                                cancelText="No"
                            >
                                <Button type="link">删除用户</Button>
                            </Popconfirm>
                            <Button type="link"
                                    onClick= {
                                        ()=>{
                                            this.state.modalXingWei = "update";
                                            this.setState({modalShow:true,modalContent:{id:record.id,name:record.name}});
                                        }
                                    }
                            >修改用户
                            </Button>
                            <Modal
                                visible={modalShow}
                                title="Title"
                                onOk={()=>{
                                    this.setState({modalShow:false});
                                }}
                                onCancel={this.handleCancel}
                                footer={[
                                    <Button key="back"
                                            onClick={
                                                ()=>{
                                                    this.setState({loading:false,modalShow:false});
                                                    this.state.modalContent = {id:"",name:""};
                                                }
                                            }
                                    >
                                        Return
                                    </Button>,
                                    <Button key="submit" type="primary" loading={this.state.loading}
                                            onClick={
                                                ()=>{
                                                    console.info({yuanid: record.id,
                                                        id:this.state.modalContent.id,
                                                        name:this.state.modalContent.name,});
                                                    this.setState({loading:true});
                                                    //这里异步开始提交数据，成功则设置loading为false，否则也设置为false。只是提示错误
                                                    fetch(`http://localhost:80/search/${this.state.modalXingWei}Stu?yuanid=${this.state.modalContent.id}&name=${this.state.modalContent.name}`,{
                                                        method: 'get',
                                                        headers:  Headers,
                                                        'mode': 'cors'
                                                    })
                                                        .then(res => {
                                                            console.log(res);
                                                            if(res.status === 200){
                                                                this.setState({loading:false});

                                                            }else{
                                                                this.setState({loading:false});
                                                                message.success('修改失败');
                                                            }
                                                            return res.json();
                                                        })
                                                        .then(data => {
                                                            if (data === false){
                                                                message.success('修改失败');
                                                            }else{
                                                                message.success('修改成功');
                                                                this.setState({
                                                                    modalShow: false,
                                                                })
                                                            }
                                                            this.updateTable();
                                                        });
                                                }
                                            }
                                    >
                                        Submit
                                    </Button>,
                                ]}
                            >
                                <Input addonBefore="姓 名:"
                                       onChange={
                                           (e)=>{
                                               this.state.modalContent.name = e.nativeEvent.data;
                                           }
                                       }
                                       defaultValue={""}
                                       placeholder={this.state.modalContent.name}
                                />
                            </Modal>
                        </div>
                    )
                }
            },
        ];

        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                this.state.selected=selectedRowKeys;
            },
        };

        return (
            <div>
                <Search placeholder="输入职工号或姓名"
                    //这里是搜索框被点击
                        onSearch={
                            (value, event)=>{
                                console.info(value);
                                fetch("http://localhost:80/search/getStuList?nameOrId="+value,{
                                    method: 'GET',
                                    headers: Headers,
                                    'mode': 'cors'
                                })
                                    .then(res => {
                                        console.log(res);
                                        return res.json();
                                    })
                                    .then(data => {
                                        console.log(data);
                                        for(let i=0;i<data.length;i++){
                                            data[i]["key"] = data[i].id;
                                        }
                                        this.setState({dataSource:data});
                                    });
                            }
                        }
                        style={{ width: 200 }}
                />
                <Button onClick={ ()=>{
                    this.state.modalXingWei = "insert";
                    this.setState({
                        modalShow: true,
                    })
                } } style={{marginBottom:20,marginLeft:5}}>添加用户</Button>
                <Popconfirm
                    title={()=>{if (this.state.selected.length===0) return "未选中！"; else return "确认删除？";}}
                    onConfirm={
                        ()=>{
                            if(this.state.selected.length!==0)
                            {
                                fetch(`http://localhost:80/search/deleteStuL?id=`+JSON.stringify(this.state.selected),{
                                    method: 'get',
                                    headers:  Headers,
                                    'mode': 'cors'
                                })
                                    .then(res => {
                                        console.log(res);
                                        if(res.status === 200){
                                            this.setState({loading:false});

                                        }else{
                                            this.setState({loading:false});
                                            message.success('删除失败');
                                        }
                                        return res.json();
                                    })
                                    .then(data => {
                                        if (data === false){
                                            message.success('删除失败');
                                        }else{
                                            message.success('删除成功');
                                            this.updateTable();
                                            this.setState({
                                                modalShow: false,
                                            })
                                        }
                                        this.updateTable();
                                    });
                                message.success(this.state.selected.length+"条记录被删除");
                            }
                            console.info(this.state.selected);
                        }
                    }
                    okText="Yes"
                    cancelText="No"
                >
                    <Button style={{marginBottom:20,marginLeft:5}}>删除选中</Button>
                </Popconfirm>
                <Table rowSelection={rowSelection} columns={columns} dataSource={this.state.dataSource}/>
            </div>

            //<RecordTable stuId={1}/>
        )
    }
}